<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>类式组件</title>
    <!-- 引入react核心库 -->
    <script src="../React-js/react.development.js"></script>
    <!-- 引入react-dom,用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="../React-js/react-dom.development.js"
    ></script>
    <!-- 引入babel,用于将jsx转换为js -->
    <script type="text/javascript" src="../React-js/babel.min.js"></script>
  </head>
  <body>
    <!-- 准备好一个“容器” -->
    <div id="test"></div>

    <script type="text/babel">
      // 1.创建组件
      class Weather extends React.Component {
        // 构造器调用几次? ————  1次
        constructor(props) {
          console.log('constructor');
          // !!! super 必须在最上面
          super(props);
          // 初始化状态
          this.state = { isHot: false, wind: '微风' };
          // 方法1.0    bind的作用: 1.生成一个新的函数  2. 改变this的指向
          this.WeatherChange = this.WeatherChange.bind(this);
          //  赋值操作: this.WeatherChange = this.WeatherChange.bind(this);
          //  this.WeatherChange中的this 绑定 [this]-->组件的实例对象
          //  也就是说 把 this.WeatherChange 这个方法中的this 指向 组件的实例对象--> Weather
          //  再赋值给 this.WeatherChange  === 等于在 组件实例对象上 添加了WeatherChange这个方法
        }
        // WeatherChange调用几次? ————  点几次调几次
        WeatherChange() {
          // WeatherChange放在哪里?-- weather 的原型上,供实例使用
          // 由于WeatherChange 是作为 onClick 的回调  So:不是通过实例调用的,是直接调用，
          // 类中的方法默认开启了局部的严格模式 So:WeatherChange中的this 为 undefined
          // console.log(this); //结果为:undefined ???    --> 06-03
          const isHot = this.state.isHot; //获取isHot值
          // 严重注意!!!  状态(state) 必须通过setState进行修改(更新)
          this.setState({ isHot: !isHot });

          // 错误做法: 下面
          // this.state.isHot = !this.state.isHot; // 修改了不起作用--> ??
          // 严重注意!!!  状态(state) 不可直接更改
          // 需要借助一个内置API 去更改  setState
        }
        // <== ==> --><--.- ---  = == ===
        //  方法2.0
        // WeatherChange = () => {
        //   //  WeatherChange放在哪里?-- weather 的原型上,供实例使用
        //   // 通过Weather实例调用 WeatherChange 时，WeatherChange 中的 this 就是 Weather 实例
        //   console.log(this); //this --> 组件实例对象
        //   //为什么箭头函数中的this就是组件实例对象呢?
        //   console.log(this.state.isHot);
        //   this.state.isHot = !this.state.isHot; // 修改了，但是不起作用。为什么？
        // };

        // render==>  中文:渲染
        // render调用几次? ————  1+n次   1-->初始化 n-->是状态更新的次数
        render() {
          console.log('render', this);
          // console.log('this', this); // Weather  的实例对象
          // 读取状态
          const { isHot, wind } = this.state;
          return (
            <h1 onClick={this.WeatherChange}>
              今天天气很{isHot ? '炎热' : '寒冷'},{wind}
            </h1>
          );
        }
      }
      // 2.渲染组件到页面
      ReactDOM.render(<Weather />, document.getElementById('test'));
    </script>
  </body>
</html>
